@require './palette'
*
    margin 0
    padding 0 
    box-sizing border-box

ul
    list-style-type none

:root
    // 明亮模式变量
    // 全局背景
    --card-bg-color #fff
    --card-shadow rgba(0,0,0,.2)
    --header-color #ffffffb3
    --brand-color #213547
    --font-color #213547
    --code-color #476582
    --code-bg-color #292d3e
    // 标签与代码背景
    --tag-color #f6f6f6
    // --divider-color #5454547a
    --divider-color #3c3c3c1f
    --table-h-color #f9f9f9
    --title-color #374151
    --disable-font #ddd
    

    
.dark
    // --card-bg-color #000
    --card-bg-color #242424
    --card-shadow rgba(255,255,255,.2)
    --header-color #000000b3
    --brand-color #ffffffde
    --font-color #adbac7
    --code-color #c9def1
    --code-bg-color #1a1a1a
    --tag-color #2f2f2f
    --divider-color #5454547a
    --table-h-color #1a1a1a
    --disable-font #666

html
    font-size 16px
    font-family Arial,'Microsoft Yahei'
    color var(--font-color)

.card_border
    border-radius 10px
    overflow hidden
    min-height 20rem
    background var(--card-bg-color)
    position relative
    box-shadow 0 0 10px var(--card-shadow)

#background
    min-height $bg-height
    display center
    position relative

#app
    min-height 100vh
    background #eee

#home
    display flex
    flex-direction column
    width 91%
    margin-left: auto
    margin-right: auto
    &:before
        content ' '
        position fixed
        top 0
        right 0
        bottom 0
        left 0
        background $bg-pic no-repeat center / cover   

.tags_brand
    padding 1.2rem
    background-color $theme-color
    font-weight 900
    color var(--brand-color)

.tags
    padding 15px
    margin 0 0 8px 0
    span
        margin-bottom 10px

#article_container
    flex-grow 1
    width 50%

.card_title_container
    color #fff
    line-height 1.75rem
    letter-spacing .025em
    text-align center
    padding 12px 24px
    background var(--title-color)
    position absolute
    height 50%
    width 100%
    display flex
    align-items flex-end
    justify-content space-evenly

.card_title
    position absolute
    width 100%
    bottom 3rem
    left 0

.title_aborder
    color #fff
    line-height 1.75rem
    letter-spacing .025em
    text-align center

.article_title
    font-weight 900
    font-size 1.25rem

.article_time
    bottom 0

.card_tag
    position absolute
    text-align left 
    width 100%
    bottom 0
    height 25%

.article_category
    min-width 6rem
    padding 0 1rem
    font-weight 700
    cursor pointer
    transition all .2s ease
    &:hover
        color $theme-color

.article_tag
    display inline-block 
    border-radius 0.5rem
    border 2px solid var(--tag-color)
    padding 0.375rem
    background var(--tag-color)
    // margin-bottom 10px
    margin-right 5px
    cursor pointer
    transition all .2s ease
    &:hover, &:active
        border-color $theme-color

.icon
    position relative
    width 18px
    height 18px
    overflow hidden
    fill var(--font-color)

.pull_down
    width 2rem
    height 2rem
    position absolute
    display block
    left 50%
    margin-left -1rem
    bottom 1rem
    fill var(--card-bg-color)
    animation animation_icon .8s cubic-bezier(.445, .05, .55, .95) .2s infinite alternate
    // -webkit-animation animation_icon .8s cubic-bezier(.445, .05, .55, .95) .2s infinite alternate

.article_nav
    position fixed
    top 110px
    z-index 9

.none_slide
    width $sidebar-width
    margin-right 1.5rem

.category_tag_key
    min-height 5vh
    margin-bottom 1.5rem
    padding 15px 0 15px 30px
    font-weight 900

.pagination
    display table !important
    margin 0 auto !important
    font-size 14px
    & > li > a
        color var(--font-color) !important
        background-color var(--card-bg-color) !important
        border-radius 0.3rem !important
        border-color transparent !important
        margin 0 .5rem
        padding 2px 9px !important
        &:hover
            color $theme-color !important
    & > .disabled > a
        color var(--disable-font) !important
        &:hover
           color var(--disable-font) !important
    & > .active > a
        color var(--card-bg-color) !important
        background-color $theme-color !important
        border-color $theme-color !important
        &:hover
            color var(--card-bg-color) !important

.giscus
    margin-top 40px

.search-box
    padding-top 3px
    padding-bottom 3px
    input
        border-width 2px !important
        background-color var(--card-bg-color) !important
        background-position-y 0.4rem !important
        &:hover
            border-color $accentColor

@media (max-width: 959px)
    .search-box input
        width inherit !important


// 移动端适配
@media (max-width: 767px)
    #info
        position fixed
        top 0
        z-index 8
        width 100%
        height 100%
        left 0
        padding-top 100px
        overflow auto
        background rgba(255,255,255,.7)
    .show_info
        opacity 1
        visibility visible
        transition all .3s
        // -webkit-transition all .3s
    .hidden_info
        opacity 0
        visibility hidden
    .none_slide
        display none
    .search-box
        margin-right 0 !important
    .search-box input 
        width 0 !important
        left 0 !important
        padding 0 18px !important
        background-image none !important
        mask url(/assets/img/search.83621669.svg)
        mask-size 40%
        mask-repeat no-repeat
        mask-position 60% 50%
        background-color var(--font-color) !important
    .search-box input:focus
        width 100% !important
        background var(--card-bg-color) url(/assets/img/search.83621669.svg) 0.6rem 0.5rem no-repeat !important
        background-size 1rem
        padding 0 0.5rem 0 1.5rem !important
        mask none
    .search-box .suggestions
        right -5rem !important


@keyframes animation_icon
    0%
        opacity: 0
        transform translateY(-30%)
        // -webkit-transform translateY(-30%)
    100%
        opacity: 1
        transform none
        // -webkit-transform none
